//生产总览组件(测试阶段)
import React, { Component } from "react";
import { connect } from "dva";
import {
    List,
    WhiteSpace,
    ListView,
    Button,
    DatePicker,
    WingBlank,
    Checkbox, Flex 
} from "antd-mobile";
import styles from "./ProHistory.less";
import "antd-mobile/dist/antd-mobile.css";
import ProHistoryTu from "../Echarts/ProHistoryTu";
import { ProHistoryQuery } from "../../../services/remove";
import moment from "moment";
import PublicService from "../../../services/PublicService";
const CheckboxItem = Checkbox.CheckboxItem;
const AgreeItem = Checkbox.AgreeItem;


class ProHistory extends Component {
   
    constructor(props) {
        super(props);
        const dataSource = new ListView.DataSource({
            rowHasChanged: (row1, row2) => row1 !== row2
        });

        this.state = {
            dataSource,
            isLoading: true,
            echarts: [],
            data: [],
            rows:10,
            rank:'',
            check1:true,
            check2:false,
            check3:false,
        };
    }

    onEndReached = event => {
        // load new data
        // hasMore: from backend data, indicates whether it is the last page, here is false
        if (this.state.isLoading && !this.state.hasMore) {
            console.log(111);
            return;
        }
        this.setState({
            rows:this.state.rows+10
        })

        if(this.state.enddate != null && this.state.startdate != null) {
            let data = {
                endTime: moment(this.state.enddate).format("YYYY-MM-DD HH:mm:ss"),
                startTime:moment(this.state.startdate).format("YYYY-MM-DD HH:mm:ss"),
                rank: this.state.rank,
                page:1,
                rows:this.state.rows
            };
            ProHistoryQuery({ ...data }).then(data => {
                console.log(data);
                this.setState({
                    data: data.data.ret.xinxishuju.items,
                    echarts: data.data.ret.tuxingshuju
                });
                setTimeout(() => {
           
                    this.setState({
                      dataSource: this.state.dataSource.cloneWithRows(data.data.ret.xinxishuju.items),
                      isLoading: false,
                    });
                  }, 600);
            });
        }
        if(this.state.enddate == null && this.state.startdate == null) {
            let data = {
                endTime: moment().format("YYYY-MM-DD HH:mm:ss"),
                startTime: moment()
                    .subtract("days", 30)
                    .format("YYYY-MM-DD HH:mm:ss"),
                rank: this.state.rank,
                page:1,
                rows:this.state.rows
            };
            ProHistoryQuery({ ...data }).then(data => {
                console.log(data);
                this.setState({
                    data: data.data.ret.xinxishuju.items,
                    echarts: data.data.ret.tuxingshuju
                });
                setTimeout(() => {
           
                    this.setState({
                      dataSource: this.state.dataSource.cloneWithRows(data.data.ret.xinxishuju.items),
                      isLoading: false,
                    });
                  }, 600);
            });
        }


       

    };

    state = {
        data: [],
        startdate:null,
        enddate: null,
        echarts:{}
    };
    //页面进入事件
    componentDidMount() {
        let data = {
            endTime: moment().format("YYYY-MM-DD HH:mm:ss"),
            startTime: moment()
                .subtract("days", 30)
                .format("YYYY-MM-DD HH:mm:ss"),
            rank: this.state.rank,
            page:1,
            rows:10
        };
        ProHistoryQuery({ ...data }).then(data => {
            console.log(data);
            this.setState({
                data: data.data.ret.xinxishuju.items,
                echarts: data.data.ret.tuxingshuju
            });
            setTimeout(() => {
            
                this.setState({
                    dataSource: this.state.dataSource.cloneWithRows(data.data.ret.xinxishuju.items),
                    isLoading: false
                });
            }, 600);
        });
        
        console.log(this.state.dataSource);
    }
    //点击详情事件
    save = id => {
        console.log(id);
        PublicService.setCookie("ProdetailsId",id);
        this.props.history.push("/ProDetails");
    };
    //时间选择事件
    onc = data => {
        console.log(data);
        this.setState({
            startdate: data
        });
        setTimeout(() => {
            if(this.state.enddate != null && this.state.startdate != null) {
            
                let data = {
                    endTime:moment(this.state.enddate).format("YYYY-MM-DD HH:mm:ss"),
                    startTime:moment(this.state.startdate).format("YYYY-MM-DD HH:mm:ss"),
                    rank:this.state.rank,
                    page:1,
                    rows:10
                };
                ProHistoryQuery({ ...data }).then(data => {
                    console.log(data);
                    this.setState({
                        data: data.data.ret.xinxishuju.items,
                        echarts: data.data.ret.tuxingshuju
                    });

                    setTimeout(() => {
         
                        this.setState({
                          dataSource: this.state.dataSource.cloneWithRows(data.data.ret.xinxishuju.items),
                          isLoading: false,
                        });
                      }, 600);
                });
               
            }
        })
    };

    onc1 = data => {
        console.log(data);
        this.setState({
            enddate: data
        });
        setTimeout(() => {
            if(this.state.enddate != null && this.state.startdate != null) {
            
                let data = {
                    endTime:moment(this.state.enddate).format("YYYY-MM-DD HH:mm:ss"),
                    startTime:moment(this.state.startdate).format("YYYY-MM-DD HH:mm:ss"),
                    rank:this.state.rank,
                    page:1,
                    rows:10
                };
                ProHistoryQuery({ ...data }).then(data => {
                    console.log(data);
                    this.setState({
                        data: data.data.ret.xinxishuju.items,
                        echarts: data.data.ret.tuxingshuju
                    });
                    setTimeout(() => {
         
                        this.setState({
                          dataSource: this.state.dataSource.cloneWithRows(data.data.ret.xinxishuju.items),
                          isLoading: false,
                        });
                      }, 600);

                });
               
            }
        })
      


    };

    onChange = (val) => {
        console.log(val);
        this.setState({
            rank:val,
            isLoading: true,
        })

        if(val == '') {
            this.setState({
                check1:true,
                check2:false,
                check3:false
            })
        }
        if(val == '普通报警') {
            this.setState({
                check1:false,
                check2:true,
                check3:false
            })
        }
        if(val == '重要报警') {
            this.setState({
                check1:false,
                check2:false,
                check3:true
            })
        }

        setTimeout(() => {

            if(this.state.enddate != null && this.state.startdate != null) {
                let data = {
                    endTime: moment(this.state.enddate).format("YYYY-MM-DD HH:mm:ss"),
                    startTime:moment(this.state.startdate).format("YYYY-MM-DD HH:mm:ss"),
                    rank: this.state.rank,
                    page:1,
                    rows:10
                };
                ProHistoryQuery({ ...data }).then(data => {
                    console.log(data);
                    this.setState({
                        data: data.data.ret.xinxishuju.items,
                        echarts: data.data.ret.tuxingshuju
                    });
                    setTimeout(() => {
               
                        this.setState({
                          dataSource: this.state.dataSource.cloneWithRows(data.data.ret.xinxishuju.items),
                          isLoading: false,
                        });
                      }, 600);
                });
            }

            if(this.state.enddate == null && this.state.startdate == null) {
                let data = {
                    endTime: moment().format("YYYY-MM-DD HH:mm:ss"),
                    startTime: moment()
                        .subtract("days", 30)
                        .format("YYYY-MM-DD HH:mm:ss"),
                    rank: this.state.rank,
                    page:1,
                    rows:10
                };
                ProHistoryQuery({ ...data }).then(data => {
                    console.log(data);
                    this.setState({
                        data: data.data.ret.xinxishuju.items,
                        echarts: data.data.ret.tuxingshuju
                    });
                    setTimeout(() => {
                    
                        this.setState({
                            dataSource: this.state.dataSource.cloneWithRows(data.data.ret.xinxishuju.items),
                            isLoading: false
                        });
                    }, 600);
                });
            }

           


        })


    }



    render() {
     


        const { data } = this.state;

        const separator = (sectionID, rowID) => (
            <div
                key={`${sectionID}-${rowID}`}
               
            />
        );
        let index = 0;
      const row = (rowData, sectionID, rowID) => {
        if (index < 0) {
          index = data.length - 1;
      }
      const obj = data[index++];
        // console.log(obj)
        return (
          <div key={rowID} style={{ borderRadius:"15px" }}>
            <div
              style={{
                lineHeight: '50px',
                color: '#888',
                fontSize: 18,
                borderBottom: '1px solid #F6F6F6',
              }}
            >{obj?obj.title:""}</div>
            <div style={{ display: '-webkit-box', display: 'flex', padding: '5px 0' ,height:60, borderRadius:"15px" }}>
            <div className={styles.list_left}
            style={{padding:'5 5'}}
            >
            <p
            className={styles.list_tp}
            >
            <span style={{color:`${obj?(obj.rank=='重要报警'?'red':'blue'):"#fff"}`,marginRight:5}}>{obj?obj.rank:""}</span>{obj?obj.site:""}</p>
            <p
            className={styles.list_bp}
            >{obj?moment(obj.createTime).format("YYYY-MM-DD HH:mm"):""}</p>
             <Button type="ghost" style={{height:20,fontSize:12,lineHeight:1.5,width:50,position:"absolute",right:14,top:18}} onClick={this.save.bind(this,obj?obj.id:9)}>详情</Button>
            </div>
         
           
              
            </div>
          </div>
        );}
        return (
            <WingBlank>
                <WhiteSpace />
                <div className={styles.containerTop}>
                    <WhiteSpace />
                    <DatePicker
                        value={this.state.startdate}
                        title="请选择开始时间"
                      
                        onChange={this.onc}
                    >
                        <List.Item arrow="horizontal">开始时间</List.Item>
                    </DatePicker>
                    <WhiteSpace
                        style={{
                            borderBottom: "1px solid rgba(175, 186, 236, 0.43)",
                            marginLeft: "15px",
                            marginRight: "15px"
                        }}
                    />
                    <DatePicker
                    
                        title="请选择结束时间"
                        extra="请选择"
                        value={this.state.enddate}
                        onChange={this.onc1}
                    >
                        <List.Item arrow="horizontal">结束时间</List.Item>
                    </DatePicker>
                        
                       
                        <List >
                        <div style={{display:'flex',justifyContent:'space-between'}} className={styles.Checkbox}>
          <CheckboxItem defaultChecked={true} checked={this.state.check1} key={1} value={"全部"} onChange={this.onChange.bind(this,'')} style={{paddingLeft:10}}>
                        全部
          </CheckboxItem>
          <CheckboxItem  key={2} checked={this.state.check2}  value={"普通"} onChange={this.onChange.bind(this,'普通报警')} style={{paddingLeft:10}}>
                        普通
          </CheckboxItem>
          <CheckboxItem  key={3} checked={this.state.check3} value={"重要"} onChange={this.onChange.bind(this,'重要报警')} style={{paddingLeft:10}}>
                        重要
          </CheckboxItem>
          </div>
       
      </List>
    

                </div>
             
                <WhiteSpace />
            <div className={styles.boxBottom}>
                <ListView
                    ref={el => (this.lv = el)}
                    dataSource={this.state.dataSource}
                    renderHeader={() => <span>报警设备/点位名称/等级</span>}
                    renderFooter={() => (
                        <div style={{ padding: 30, textAlign: "center" }}>
                            {this.state.isLoading ? "Loading..." : "Loaded"}
                        </div>
                    )}
                    renderRow={row}
                    renderSeparator={separator}
                    className="am-list"
                    pageSize={4}
                    useBodyScroll
                  
                    scrollRenderAheadDistance={500}
                    onEndReached={this.onEndReached}
                    onEndReachedThreshold={10}
                />
                </div>
            </WingBlank>
        );
    }
}
function mapStateToProps(state) {
    return {};
}
export default connect()(ProHistory);
